<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-sticky>
      <van-nav-bar title="订单详情" left-arrow @click-left="onPageBackClick"/>
    </van-sticky>

    <div class="content">
      <!-- 订单状态 -->
      <div class="status-info">
        <div class="status" v-if="orderInfo.status == 0">
          <span class="text">预订成功</span>
          <span class="more">请携带有效证件前往酒店前台办理入住手续</span>
        </div>
        <div class="status" v-if="orderInfo.status == 1">
          <span class="text">订单已完成</span>
          <span class="more">期待您再次光临</span>
        </div>
        <div class="status" v-if="orderInfo.status == 2">
          <span class="text">正在入住中</span>
          <span class="more">祝您每日开心，如需帮助，请随时联系前台</span>
        </div>
        <div class="status" v-if="orderInfo.status == 3">
          <span class="text">订单已取消</span>
          <span class="more">欢迎随时提出宝贵意见，期待您再次光临</span>
        </div>
      </div>

      <!-- 支付信息 -->
      <van-cell-group inset class="payment-info">
        <van-cell title="订单金额">
          <template>
            <span class="total-price"><sub>￥</sub>{{orderInfo.totalPrice}}<sub>元</sub></span>
          </template>
        </van-cell>
        <van-cell title="支付方式" :value="orderInfo.paymentMode == 0 ? '在线支付' : '线下支付'"/>
        <van-cell title="支付流水号" :value="orderInfo.paymentSerialNumber"/>
        <van-cell title="支付状态" :value="orderInfo.paymentStatus == 0 ? '失败' : '成功'"/>
      </van-cell-group>

      <!-- 订单信息 -->
      <van-cell-group inset class="order-info">
        <van-cell title="入住日期" :value="orderInfo.checkInDate"/>
        <van-cell title="离店日期" :value="orderInfo.checkOutDate"/>
        <van-cell title="入住天数" :value="orderInfo.bookingDays + '晚'"/>
        <van-cell title="入住人" :value="orderInfo.customerFamilyName + orderInfo.customerGivenName"/>
        <van-cell title="联系电话" :value="orderInfo.customerPhoneNumber"/>
      </van-cell-group>

      <!-- 取消 -->
      <div class="cancel-order" v-if="orderInfo.status == 0">
        <van-button round block color="#7c6ba2" @click="onCancelOrderClick">取消订单</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        id: 0,
        status: 0
      }
    }
  },
  methods: {
    onPageBackClick() {
      this.$router.back();
    },
    loadOrderInfo() {
      let orderList = [
        { id: 1, roomTypeImage: require("@/assets/image/room-1.png"), roomTypeName: '大床房', checkInDate: '2024.12.11', checkOutDate: '2024.12.13', bookingDays: 2, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1000, status: 0, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 2, roomTypeImage: require("@/assets/image/room-2.png"), roomTypeName: '双床房', checkInDate: '2024.12.12', checkOutDate: '2024.12.15', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1500, status: 2, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 3, roomTypeImage: require("@/assets/image/room-3.png"), roomTypeName: '豪华套房', checkInDate: '2024.12.13', checkOutDate: '2024.12.16', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2400, status: 1, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 4, roomTypeImage: require("@/assets/image/room-4.png"), roomTypeName: '标准单人间', checkInDate: '2024.12.14', checkOutDate: '2024.12.17', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 900, status: 3, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 5, roomTypeImage: require("@/assets/image/room-5.png"), roomTypeName: '亲子主题房', checkInDate: '2024.12.15', checkOutDate: '2024.12.18', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1800, status: 0, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 6, roomTypeImage: require("@/assets/image/room-6.png"), roomTypeName: '情侣浪漫房', checkInDate: '2024.12.16', checkOutDate: '2024.12.19', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 1350, status: 1, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 7, roomTypeImage: require("@/assets/image/room-7.png"), roomTypeName: '行政楼层套房', checkInDate: '2024.12.17', checkOutDate: '2024.12.20', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 3000, status: 3, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 8, roomTypeImage: require("@/assets/image/room-8.png"), roomTypeName: '三人家庭房', checkInDate: '2024.12.18', checkOutDate: '2024.12.21', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2100, status: 1, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 9, roomTypeImage: require("@/assets/image/room-9.png"), roomTypeName: '四人团体房', checkInDate: '2024.12.19', checkOutDate: '2024.12.22', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 2400, status: 2, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 },
        { id: 10, roomTypeImage: require("@/assets/image/room-10.png"), roomTypeName: '海景房', checkInDate: '2024.12.20', checkOutDate: '2024.12.23', bookingDays: 3, customerFamilyName: '周', customerGivenName: '星星', customerGender: 1, customerPhoneNumber: '13900139000', totalPrice: 3300, status: 1, paymentStatus: 1, paymentSerialNumber: '20250101121314567', paymentMode: 0 }
      ];
      for (let i = 0; i < orderList.length; i++) {
        if (orderList[i].id == this.orderInfo.id) {
          this.orderInfo = orderList[i];
          break;
        }
      }
    },
    onCancelOrderClick() {
      this.$dialog.confirm({
        title: '取消订单',
        message: '确定要取消订单吗？',
      }).then(() => {
        this.handleCancelOrder();
      }).catch(() => {
      });
    },
    handleCancelOrder() {
      let orderId = this.orderInfo.id;
      this.$toast.success('取消成功，id=' + orderId);
    }
  },
  created() {
    let orderId = this.$route.query.orderId;
    if (!orderId) {
      this.$dialog.alert({
        title: '错误',
        message: '非法参数：' + orderId,
      }).then(() => {
        this.$router.push('/');
      })
    } else {
      this.orderInfo.id = orderId;
    }
  },
  mounted() {
    this.loadOrderInfo();
  }
}
</script>

<style scoped>
.container { max-width: 400px; height: 100vh; background: #f6f6f6; }
.content { height: 100vh; }

.status-info { padding: 20px; vertical-align: center; }
.status-info .text { font-size: 16px; }
.status-info .more { font-size: 10px; color: #999; margin-left: 5px; }

.payment-info { margin-bottom: 20px; }
.payment-info .total-price { color: #e62e2f; }
.payment-info .total-price sub { vertical-align: baseline; font-size: 0.6em; }

.order-info { margin-bottom: 20px; }

.cancel-order { padding: 0 20px; }
</style>